<template>
  <div class="filter-head">
    <el-input
      v-model="input"
      style="max-width: 600px"
      placeholder="请输入"
      class="input-with-select"
      @change="handleInputChange()"
    >
      <template #prepend>
        <el-select v-model="type" placeholder="请选择" style="width: 135px">
          <el-option
            v-for="(item, indexName) in options"
            :key="indexName"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
    </el-input>
    <span style="margin-left: 30px">
      <el-button type="primary" @click="handleOnClick()">查询</el-button>
      <el-button @click="handleOnReset()">重置</el-button>
    </span>

    <div class="btn-operate">
      <el-button type="primary" @click="handleCreate()">添加</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { debounce } from "lodash";
import { ref } from "vue";
import { options } from "./const";

const input = ref("");

const dalay = 300; // debounce 延迟触发时间

const type = ref("configName");

const emit = defineEmits(["operate-add", "input-change"]);

const handleCreate = () => {
  emit("operate-add");
};

const handleInputChange = debounce(() => {
  emit("input-change", input.value, type.value);
}, dalay);

const handleOnClick = () => {
  emit("input-change", input.value, type.value);
};
const handleOnReset = () => {
  input.value = "";
  emit("input-change", input.value);
};
</script>

<style lang="scss" scoped>
.filter-head {
  line-height: 50px;
  .btn-operate {
    float: right;
  }
}
</style>
